<script setup lang="ts">
import { ref } from 'vue'
import logger from '../utils/logger'
import {
  AppConfig,
  type Notice,
  DEFAULT_NOTICE_TEXT,
  HISTORY_NOTICES,
  CATEGORY_COLORS
} from '../config'
// 引入Naive UI组件
import { NButton, NCard, NModal } from 'naive-ui'
import NoticeBar from '../components/NoticeBar.vue'
import LoginSettings from '../components/LoginSettings.vue'
import SettingsPanel from '../components/SettingsPanel.vue'
import LogPanel from '../components/LogPanel.vue'

interface LoginFormData {
  loginId: string
  loginKey: string
}

// 登录弹窗状态（根据配置决定是否默认显示）
const showLoginModal = ref(AppConfig.ENABLE_LOGIN)

// 设置面板弹窗状态
const showSettingsModal = ref(false)

// 调用 后端 Playwright
const startPlaywright = (): void => {
  logger.debug('用户点击调用Playwright按钮')
  logger.info('开始执行 Playwright 任务')
  window.electron.ipcRenderer.send('startPlaywright')
}

// 公告栏数据（从配置导入）
const noticeText = ref(DEFAULT_NOTICE_TEXT)

// 历史公告数据（从配置导入）
const historyNotices = ref<Notice[]>([...HISTORY_NOTICES])

// 添加到历史记录
const handleAddToHistory = (notice: Notice): void => {
  historyNotices.value.unshift(notice)
}

// 登录相关状态（如果禁用登录，则默认已登录）
const isLoggedIn = ref(!AppConfig.ENABLE_LOGIN)
const loginForm = ref<LoginFormData>({
  loginId: '',
  loginKey: ''
})

// 登录成功处理
const handleLoginSuccess = (): void => {
  logger.success('登录成功')
  isLoggedIn.value = true
  // 登录成功后关闭弹窗
  showLoginModal.value = false
}

// 登录开始
const handleLoginStart = (): void => {
  logger.info('开始登录...')
}

// 登录结束
const handleLoginEnd = (): void => {
  logger.info('登录流程结束')
}

// 登录日志
const handleLoginLog = (log: { message: string; type: string }): void => {
  logger[log.type as 'info' | 'success' | 'error' | 'warning'](log.message)
}

// 打开设置面板
const openSettings = (): void => {
  showSettingsModal.value = true
  logger.debug('打开设置面板')
  logger.info('设置面板已打开')
}
</script>

<template>
  <div class="p-4 space-y-4">
    <!-- 公告栏 -->
    <notice-bar
      :text="noticeText"
      theme-type="info"
      :duration="15"
      :enable-scroll="true"
      :history-notices="historyNotices"
      :category-colors="CATEGORY_COLORS"
      @add-to-history="handleAddToHistory"
    />

    <!-- 功能按钮 - 登录后才显示 -->
    <n-card v-if="isLoggedIn" title="功能操作" :bordered="true" class="rounded-lg">
      <div class="flex gap-4 flex-wrap">
        <n-button type="info" @click="startPlaywright">调用 playwright 发布公众号</n-button>
        <n-button type="primary" @click="openSettings">打开设置</n-button>
      </div>
    </n-card>

    <!-- 登录弹窗 -->
    <n-modal
      v-model:show="showLoginModal"
      preset="card"
      title="用户登录"
      :bordered="false"
      :closable="false"
      :mask-closable="false"
      :close-on-esc="false"
      class="w-500px max-w-90vw"
    >
      <login-settings
        v-model="loginForm"
        @login-success="handleLoginSuccess"
        @login-start="handleLoginStart"
        @login-end="handleLoginEnd"
        @login-log="handleLoginLog"
      />
    </n-modal>

    <!-- 设置面板弹窗 -->
    <n-modal
      v-model:show="showSettingsModal"
      preset="card"
      title="应用设置"
      :bordered="false"
      :closable="true"
      :mask-closable="true"
      class="w-60vw max-w-95vw min-w-500px"
    >
      <settings-panel />
    </n-modal>

    <!-- 日志面板 -->
    <n-card title="执行日志" :bordered="true" class="rounded-lg">
      <div class="h-300px">
        <log-panel />
      </div>
    </n-card>
  </div>
</template>
